<template>
	<view class="content">
		<u-navbar title="信息"></u-navbar>
		<view class="title">{{lists.title}}</view>
		<view class="dis_f_sb_c" style="margin-bottom: 20rpx;">
			<view class="dis_f_l_c s_text">
				<view style="margin-right: 10rpx;">{{lists.pubdate}}</view>
				<view v-if="lists.youxiao">{{lists.youxiao}}天后过期</view>
			</view>
			<view class="dis_f_l_c">
				<view class="dis_f_l_c _right s_text">
					<image src="../../static/icon/icon_a.png" mode=""></image>
					<view>{{lists.click}}</view>
				</view>
				<view class="dis_f_l_c _right s_text" v-if="lists.love">
					<image src="../../static/icon/icon_b.png" mode=""></image>
					<view>{{lists.love}}</view>
				</view>
				<view class="dis_f_l_c _right s_text" v-if="lists.pinglunnum">
					<image src="../../static/icon/icon_c.png" mode=""></image>
					<view>{{lists.pinglunnum}}</view>
				</view>
			</view>
		</view>
		<!-- 发布人信息 -->
		<view class="dis_f_sb_c bgc" v-if="lists.member">
			<view class="user_info dis_f_l_c">
				<image class="tx"
					:src="lists.member.photo"
					mode=""></image>
				<view class="dis_f_co">
					<view class="nickname slh_one">{{lists.member.nickname}}</view>
					<view class="dis_f_l_c num" v-if="lists.fabunum">
						他发布的信息
						<span style="color: #5B71AB;margin: 0 5rpx;">{{lists.fabunum}}</span>
						条
					</view>
				</view>
			</view>
			<view class="dis_f_sb_c tel" @click="call(lists.tel)">
				<image src="../../static/icon/iphone_icon.png" mode=""></image>
				<view style="margin-right: 8rpx;">电话咨询</view>
			</view>
		</view>
		<!-- 地址 -->
		<view class="fb_address dis_f_l_c">
			<image src="../../static/icon/icon_area_img.png" mode=""></image>
			<view>{{lists.address}}</view>
		</view>
		<!-- 图文信息 -->
		<view class="dis_f_co new_list">
			<view v-if="cate == 0 || cate == 1 ">
				<image v-for="(item,index) in lists.pic"
				:src="item" mode="widthFix"></image>
			<view>
				{{lists.body}}
			</view>
			</view>
			
			<view v-if="cate == 1">
				户型：{{lists.room}}室{{lists.hall}}厅{{lists.guard}}卫	
				面积：{{lists.area}}㎡
				朝向：{{lists.direction}}
				类型：{{lists.rentype}}
			</view>
			<view v-if="cate == 2">
			薪资：{{lists.salary}}
			工作时间：{{lists.experience}}
			学历：{{lists.educational}}
			工作性质：{{lists.nature}}
			<view>
				职位描述：
				<view v-for="(item,index) in lists.note">
					{{item}}
				</view>
				职位要求：
				<view v-for="(item,index) in lists.claim">
					{{item}}
				</view>
			</view>
			</view>
			
			<view v-if="cate == 3">
				<!-- 3213213 -->
				<u-parse :html="lists.body"></u-parse>
			</view>
				
				
		</view>
		<!-- 评论 -->
		<view class="">
			<hb-comment ref="hbComment" @add="add" @del="del" @like="like" @focusOn="focusOn" :deleteTip="'确认删除？'"
				:cmData="commentData" v-if="commentData"></hb-comment>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commentData: {
					
				},
				lists:[],
				cate:0,
				id:0,
				ces:'3213213'
			};
		},
		onLoad(e) {
			this.cate = e.cate
			this.id = e.id
			this.detail(e.cate,e.id)
		},
		onShow() {
			this.getComment()
		},
		methods:{
			call(e){
				uni.makePhoneCall({
					phoneNumber: e //仅为示例
				});
			},
			detail(cete,id){
				this.$.ajax(2, 'post', 'detail', {
					cate:cete,
					id:id,
					uid:this.$.get_data('uid')
				}, (res) => {
					// console.log(res)
					if (res.code == 1) {
						this.lists = res.list
						if(this.lists.pinglun){
							this.getComment(this.lists.pinglun)
						}
							
					}
				})
			},
			// 登录校验
			checkLogin() {
				// TODO 此处填写登录校验逻辑
				var uid = this.$.get_data('uid')
				if (uid) {
					return true;
				} else {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '前往登录',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/login/login'
								});
							}
						}
					});
					return false;
				}
			},
			// 输入框聚焦
			focusOn() {
				this.checkLogin();
			},
			// 获取评论
			getComment(articleId) {
				// TODO 接入真实接口
				// this.$u.api.commentList(articleId).then(res => {
				// this.commentData = {
				// 	"readNumer": res.readNumer,
				// 	"commentSize": res.commentList.length,
				// 	"comment": this.getTree(res.commentList)
				// };
				// }).catch(res => {})
				
				// 下边假装请求成功
				let res = {
					"readNumer": 193,
					"commentList": articleId
				};
				this.commentData = {
					"readNumer": res.readNumer,
					"commentSize": res.commentList.length,
					"comment": this.getTree(res.commentList)
				};
			},
			// 新增评论
			add(req) {
				if (!this.checkLogin()) {
					return
				}  
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				console.log(JSON.parse(req))
			var reqs = JSON.parse(req)
				this.reqFlag = true;
				this.$.ajax(2, 'post', 'pinglun', {
					type:'info-detail',
					pid:reqs.pId,
					content:reqs.content,
					id:this.id,
					uid:this.$.get_data('uid')
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						
							this.getComment(this.lists.pinglun)
					}
				})
				// TODO 接入真实接口
				// let params = {
				// 	"articleId": this.articleId,
				// 	"pId": req.pId,
				// 	"content": req.content
				// }
				// this.$u.api.commentAdd(params).then(res => {
				// 	uni.showToast({
				// 		title: '操作成功！',
				// 		duration: 3000
				// 	});
				// 	this.$refs.hbComment.addComplete();
				// 	this.getComment();
				// 	this.reqFlag = false;
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })
				// 下边假装请求成功
				this.reqFlag = false;
				this.$refs.hbComment.addComplete();
				this.detail(this.cate,this.id)
			},
			// 点赞评论
			like(commentId) {
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				this.$.ajax(2, 'post', 'dianzan', {
					// type:'info-detail',
					id:commentId,
					uid:this.$.get_data('uid')
				}, (res) => {
					console.log(res)
					if (res.code == 1) {
						
							this.detail(this.cate,this.id)
					}
				})
				console.log(commentId)
				// TODO 接入真实接口
				// this.$u.api.commentLike(commentId).then(res => {
				// 	this.$refs.hbComment.likeComplete(commentId);
				// 	this.reqFlag = false;
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })
				// 下边假装请求成功
				this.reqFlag = false;
				this.$refs.hbComment.likeComplete(commentId);
			},
			// 删除评论
			del(commentId) {
				if (!this.checkLogin()) {
					return
				}
				if (this.reqFlag) {
					uni.showToast({
						title: '操作频繁',
						duration: 1000
					});
					return
				}
				this.reqFlag = true;
				// TODO 接入真实接口
				// this.$u.api.commentDelete(commentId).then(res => {
				// 	this.reqFlag = false;
				// 	this.$refs.hbComment.deleteComplete(commentId);
				// }).catch(res => {
				// 	this.reqFlag = false;
				// })
				// 下边假装请求成功
				this.reqFlag = false;
				this.$refs.hbComment.deleteComplete(commentId);
			},
			// 列表按照父子转换成树
			getTree(data) {
				let result = [];
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.content {
		padding: 20rpx;

		.new_list {
			image {
				width: 100%;
				// height: 100vh;
				margin-bottom: 20rpx;
			}
		}

		.fb_address {
			width: 100%;
			padding: 20rpx;
			border-radius: 0 0 10rpx 10rpx;
			background: rgba(247, 248, 252, 1);
			color: #5B71AB;
			font-size: 26rpx;
			margin-bottom: 30rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}

		.title {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.s_text {
			font-size: 24rpx;
			color: #B5B6BA;
		}

		._right {
			margin-right: 10rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}
		}

		.bgc {
			background-color: #fff;
			width: 100%;
			padding: 40rpx 20rpx;
			border-radius: 10rpx;
			// box-sizing: border-box;
			box-shadow: 0rpx 3rpx 12rpx rgba(34, 34, 34, 0.05);
			// box-shadow: 0 3px 2.3px 0 rgb(18 18 45 / 9%);
		}

		.user_info {

			.tx {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.nickname {
				font-size: 30rpx;
				margin-bottom: 8rpx;
				width: 300rpx;
			}

			.num {
				font-size: 24rpx;
			}
		}

		.tel {
			background: linear-gradient(to right, #2458ff, #68acff);
			border-radius: 30rpx;
			width: 180rpx;
			height: 60rpx;
			color: #fff;
			font-size: 22rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>
